<template>
	<view class="insertPages">
		<view v-if="!schoolmapshow">
			<u-toast ref="uToast" />
			<image
				src="https://skillgo.cn/image/Chargepic/chargeMap/title.png"
				class="title"
			/>
			<view class="form">
				<u-form
					:model="form"
					ref="uForm"
					:border-bottom="true"
					label-style="font-widght:700"
					:rule="rules"
				>
					<u-form-item label="学校">
						<view
							@click="show1 = true"
							class="chosebtn"
						>
							{{form.school || ""}}
						</view>
					</u-form-item>
					<u-form-item label="校区">
						<view
							@click="changeIndex && (show = true)"
							class="chosebtn"
						>
							{{form.compusName || ""}}
						</view>
					</u-form-item>
					<u-form-item label="年级">
						<view
							@click="changeIndex && (show2 = true)"
							class="chosebtn"
						>
							{{form.grade || ""}}
						</view>
					</u-form-item>
					<u-form-item label="学院">
						<view
							@click="changeIndex && (show3 = true)"
							class="chosebtn"
						>
							{{form.college || ""}}
						</view>
					</u-form-item>
					<u-form-item label="专业">
						<input
							v-model="form.major"
							border="true"
							:disabled="!changeIndex"
							class="chose-input"
						>
					</u-form-item>
				</u-form>
			</view>
			<view class="loginfoo">
				<view
					class="login-world"
					@click="submit() "
				>
					开启全新世界
				</view>
			</view>
			<u-picker
				mode="selector"
				:show="show1"
				:default-selector="[0]"
				:columns="school"
				title="学校选择"
				:closeOnClickOverlay="true"
				@confirm="Confirmshools"
			/>
			<u-picker
				:show="show"
				mode="single-column"
				title="校区选择"
				:columns="Compus"
				@cancel="show=false"
				@confirm="ConfirmCompus"
			/>
			<u-picker
				:show="show2"
				mode="single-column"
				:closeOnClickOverlay="true"
				title="年级选择"
				:columns="Grade"
				@cancel="show2=false"
				@confirm="ConfirmGrade"
			/>
			<u-picker
				:show="show3"
				mode="single-column"
				:closeOnClickOverlay="true"
				:columns="Academy"
				@cancel="show3=false"
				@confirm="ConfirmAcademy "
			/>
		</view>
	</view>
</template>

<script>
import { getSchool, getcollege, getCmpus, LoginByCode, login } from '@/api/user.js'
import { setToken, getToken } from '@/store/user.js'
export default {
  data() {
    return {
      schoolmapshow: false,
      form: { wxId: '', school: '', schoolId: 1, campus: 1, login: '', grade: '', college: '', major: '', compusName: '', avatarUrl: '', appNickName: 'meta' },
      show: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      school: [],
      // 学校字典列表
      schoolList: [],
      Compus: [],
      // 校区列表
      CampusList: [],
      Grade: [['大四', '大三', '大二', '大一', '研究生', '博士生']],
      Academy: [],
      Major: [],
      changeIndex: false,
      rules: {
        school: [
          {
            required: true,
            message: '请输入学校',
            trigger: ['change', 'blur'],
          }
        ],
        compus: [
          {
            required: true,
            message: '请输入校区',
            trigger: 'change'
          }
        ],
        grade: [
          {
            required: true,
            message: '请输入年级',
            trigger: 'change'
          }
        ],
        academy: [
          {
            required: true,
            message: '请输入学院',
            trigger: 'change'
          }
        ],
        major: [
          {
            required: true,
            message: '请输入专业',
            trigger: 'change'
          }
        ]
        // 是否展示界面
      },
    }
  },
  created() {
    // 如果有token则跳转到主页
    if (getToken()) {
      // this.show1 = true
      console.log('as')
      uni.redirectTo({
        url: '/pages/app'
      })
    } else {
      this.loginAction()
      this.getlistdata()
    }
  },
  methods: {
    // 获取填写数据
    async getlistdata() {
      const res = await getSchool()

      this.schoolList.push(res)
      const ma = res.map(item => item.school)

      this.school.push(ma)
    },
    // 获取
    async getlistcollege(data) {
      const res = await getcollege({ school: data })
    },
    showToastSuc(params) {
			  this.$refs.uToast.show({
			    type: 'success',
			    title: params,
			    message: params,
			    iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
			  })
    },
    async getlistCmpus(data) {
      const res = await getCmpus({ school: data.toString() })

      console.log(res)

    },
    /** 学校 */
    async Confirmshools(e) {

      this.form.school = e[ 'value' ][ 0 ]
      // 根据学校名字获取对应的id
      this.schoolList.forEach(item => {
        if (item.school === e[ 'value' ][ 0 ]) {
          this.form.schoolId = item.id
        }
      })
      const data = 1

      this.show1 = false

      let res = await getcollege({ school: this.form.schoolId })

      this.changeIndex = true
      const ma = res.map(item => item.college)

      console.log('学院', ma)
      this.Academy.push(ma)

      // 获取校区
      res = await getCmpus({ school: data })
      this.CampusList = res
      const mp = res.map(item => item.campus)

      this.Compus.push(mp)
      // console.log('校区', this.Compus)
    },
    /** 校区 */
    ConfirmCompus(e) {
      this.form.compusName = e[ 'value' ][ 0 ]
      this.CampusList.forEach(item => {
        if (item.campus === e[ 'value' ][ 0 ]) {
          this.form.campus = item.id
        }
      })
      // if (e[ 'value' ][ 0 ] === '朝晖校区') { this.form.campus = 1 } else if (e[ 'value' ][ 0 ] === '屏峰校区') { this.form.campus = 2 } else { this.form.campus = 3 }

      this.show = false
    },
    /** 年级 */
    ConfirmGrade(e) {
      this.form.grade = e[ 'value' ][ 0 ]

      this.show2 = false
    },
    /** 学院 */
    ConfirmAcademy(e) {

      this.form.college = e[ 'value' ][ 0 ]
      this.show3 = false
    },
    /** 专业 */
    ConfirmMajor(e) {
      console.log(e[ 0 ].label[ 0 ])
      this.form.major = e[ 'value' ].label[ 0 ]
    },
    showToast(params, type = 'success') {
      this.$refs.uToast.show({
        type: type,
        title: params,
        message: params,
        iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'

      })
    },
    // 提交表格
    submit() {

      if ((this.form.school == '' || this.form.compus == '') || ((this.form.grade == '' || (this.form.academy == '' || this.form.major == '')))) {
        this.showToast('信息填写不全')
      } else {
        this.loginAction()
      }

    },
    loginAction() {
      const formData = this.form
      const that_ = this

      wx.login({
        success(res) {
          console.log(res.code)
          LoginByCode({ code: res.code }).then(res => {
            // 未登录则返回openid 并调用普通登陆接口
            console.log('res', res)
            if (res.code === 0 && !res.data.ifLogin) {
              formData.wxId = res.data.openId
              if ((that_.form.school == '' || that_.form.compus == '') || ((that_.form.grade == '' || (that_.form.academy == '' || that_.form.major == '')))) {
                that_.showToast('信息填写不全', 'error')
              } else {
                login(formData).then(res => {
                  console.log(res)
                  setToken(res.data.token)
                  uni.redirectTo({
                    url: '/pages/app'
                  })
                  that_.showToastSuc('登陆成功')
                })

              }
            } else if (res.code === 0) {
              setToken(res.data.token)
              // that_.schoolmapshow = true
              uni.redirectTo({
                url: '/pages/app'
              })
              that_.showToastSuc('登陆成功')
            } else {
              that_.showToast('登陆失败')
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.insertPages{
	width: 100wh;
	min-height: 100vh;
	background-color: #fcfcfc;
	image{
		width: 95vw;
		margin-left: 50%;
		transform: translate(-50%);
	}
	.chose-input {
		background-color: #ffffff;
		box-shadow: 0 4rpx 20rpx 0 rgba(13, 127, 255, 0.1);
		max-width: 500rpx;
		max-height: 72rpx;
		border-radius: 16rpx;
		text-align: center;
	}
	.chosebtn {
		width: 510rpx;
		height: 72rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		box-shadow: 0 4rpx 20rpx 0 rgba(13, 127, 255, 0.1);
		line-height: 72rpx;
		text-align: center;
		white-space:nowrap;
		text-overflow: ellipsis;
	}

	.loginfoo {
		width: 100wh;
		display: flex;
		justify-content: center;
		padding-top: 120rpx;
		.login-world {
			height: 108rpx;
			width: 686rpx;
			line-height: 108rpx;
			text-align: center;
			background-color: #3A62E9;
			color: #ffffff;
			font-size: 40rpx;
			font-weight: 600;
			border-radius: 16rpx;
		}
	}

.form{
	width: 83vw;
	margin-left: 50%;
	transform: translate(-50%);
	font-size: 50rpx;
	font-weight: 500;

	.u-input{
		box-shadow:0 0 8px rgba(58, 98, 233, 0.1) ;
	}

}

}
</style>
